<template>
  <section>
    <!-- 面包屑 -->
      <breadcrumbs></breadcrumbs>
    <!-- <btns @exec="exec"></btns> -->
    <el-button @click="del">处理纠错</el-button>
    <div class="data-container scroll-table">
      <div class="flex">
        <div class="ind-title lh50 f16">纠错列表</div>
      </div>
      <div>
        <el-form ref="searchForm" :model="searchForm" label-width="180px" inline class="demo-form-inline" size='small'
                 style="border-bottom: 1px solid #f6f6f6;">

          <el-form-item label="课程标题/提交者昵称">
            <el-input v-model="searchForm.keywords" placeholder="请输入课程标题/提交者昵称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="searchForm.date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" @selection-change="tableSelectionChange" style="width: 100%" row-key="ifId" border lazy>
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column prop="title" label="课程标题" align="center"> </el-table-column>
        <el-table-column prop="content" label="纠错内容" align="center"> </el-table-column>
        <el-table-column prop="nickname" label="提交者昵称" align="center"> </el-table-column>
        <el-table-column prop="addtime" label="评论时间" align="center"> </el-table-column>
        <el-table-column prop="imgs" label="纠错图片">
          <template slot-scope="scope">
            <el-image v-if="img != ''" style="width: 60px; height: 60px" :key='img' v-for="img in scope.row.imgs.split(',')" :src="img" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已处理</span>
            <span v-if="scope.row.state == 2">待处理</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </section>
</template>
<style>
</style>
<script>

import mixins from "@/utils/mixins";
import btns from "@/components/btns.vue";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  mixins: [mixins],
  components: {
    btns,
    breadcrumbs,

  },
  data() {
    return {
      importFileUrl: this.GLOBAL.imgBaseUrl,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      formType: "add",
      tableData: [],
      id: null,
      createForm: {},
      searchForm: {
        current: 1,
        size: 20,
        beginTime: '',
        endTime: '',
        keywords: "",
        date: [],
      },
      dialogCreateFormVisible: false,
      hasFile: false,
      headImgUrl: "",
    };
  },

  created() {
    this.id = this.$route.query.id;
    console.log(this.id)
    this.getList(this.id);

  },
  methods: {
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    del() {
      if (this.tableSelection.length < 1) {
        this.$message.error('请选中一行数据');
        return
      }
      if (this.tableSelection[0].state != 2) {
        this.$message.error('请选择状态为待处理的数据');
        return
      }
      this.$confirm("确认已处理这次纠错, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // let ids = this.tableSelection.map(e => {
          //   return e.contentId
          // })
          this.$api.course
            .checkCourseError({
              // courseErrorId: ids.join(','),
              courseErrorId: this.tableSelection[0].courseErrorId
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功！",
                });
                this.getList();
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    search() {
      this.getList();
    },
    handleReset() {
      this.searchForm = {
        keywords: "",
        date: [],
        beginTime: '',
        endTime: ''
      },
        // this.$refs.searchForm.resetFields();
        this.getList();
    },
    showCourseContentForm(index) {
      if (index == 1) {
        this.dialogCreateFormVisible = true;
      } else {
        this.formType = "edit"
        if (this.tableSelection.length != 1) {
          this.$message.error('请选中一行数据');
          return
        }
        var demo = this.tableSelection[0];
        console.log(demo);

        // contentId: row.contentId,
        //       content: row.contentUrl,
        //       courseId: this.id,
        //       duration: row.videoNum * 1000,
        //       headImg: row.headImgUrl,
        //       sort: row.Sort,
        //       title: row.title,
        //       type: row.Type
        this.createForm = {
          contentUrl: demo.content,
          videoNum: demo.duration / 1000,
          Sort: demo.sort,
          title: demo.title,
          Type: demo.type,
          contentId: demo.contentId,
          headImgUrl: demo.headImg,



        }
        this.dialogCreateFormVisible = true;
      }

    },
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      // eslint-disable-next-line no-console
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },

    getList() {
      if (this.searchForm.date && this.searchForm.date.length == 2) {
        this.searchForm.beginTime = this.format(this.searchForm.date[0]);
        this.searchForm.endTime = this.format(this.searchForm.date[1]);
      }
      this.$api.course.getCourseErrorList({
        current: this.pageSize,
        size: this.currentPage,
        keyword: this.searchForm.keywords,
        beginTime: this.searchForm.beginTime,
        endTime: this.searchForm.endTime
      })
        .then((d) => {
          if (d.code == 200) {
            this.tableData = d.data;
            this.total = d.totalCount;
          }
        });
    }
  },


};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-feng {
  width: 120px;
  height: 120px;
}
</style>
